@import (reference) "~weaver-mobile/dist/weaver-mobile.less";

@emailView: email-view;

@emialReadList: email-readlist;

.@{emailView} {
  height: 100%;
  color: @color-text-paragraph;
  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &-box {
    position: relative;
    height: 100%;
    width: 100%;
  }
  &-top {
    position: absolute;
    top: 0;
    width: 100%;
    height: 30 * @hd;
    line-height: 30 * @hd;
    text-align: center;
    color: @color-text-base-inverse;
    opacity: 0.5;
    background: @color-text-caption;
    z-index: 10;
  }
  &-container {
    position: absolute;
    top: 0;
    width: 100%;
    bottom: @tab-bar-height;
    box-sizing: border-box;
  }
  &-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .email-view-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  &-base {
    padding: @h-spacing-md @v-spacing-lg;
    .hairline("bottom");
    &-right {
      position: relative;
      display: inline-block;
      @diff: 50 * @hd;
      width: calc(~"100% - @{diff}");
      height: 40 * @hd;
      margin-left: @v-spacing-md;
      &-name {
        .ellipsis;
        display: inline-block;
        width: 100%;
      }
      &-date {
        position: absolute;
        bottom: 0;
        color: @color-text-caption;
        width: 100%;
        .senddate {
          display: inline-block;
          max-width: calc(~"100% - " 90 * @hd);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      &-reciever {
        position: absolute;
        right: 0;
        color: @brand-primary;
        .am-icon {
          color: @fill-disabled;
          vertical-align: top;
          margin-left: 2 * @hd;
        }
      }
    }
  }
  &-base.english {
    .@{emailView}-base-right {
      height: 60 * @hd;
      &-reciever {
        position: relative;
        display: inline-block;
        float: right;
      }
    }
  }
  &-complete {
    .hairline("bottom");
    padding: 0 @v-spacing-lg;
    &-to {
      padding-top: @h-spacing-md;
      &-item {
        display: flex;
        padding-bottom: @h-spacing-md;
        &-title {
          display: inline-block;
          height: 25 * @hd;
          line-height: 25 * @hd;
          color: @color-text-caption;
          flex-shrink: 0;
        }
        &-detail {
          position: relative;
          overflow: hidden;
          text-overflow: ellipsis;
          padding-left: 10 * @hd;
          box-sizing: border-box;
          width: auto;
          &-unread,
          &-readed {
            display: inline-block;
            background: fade(@fill-disabled, 30%);
            border-radius: @radius-xs;
            height: 25 * @hd;
            line-height: 25 * @hd;
            padding: 0 @v-spacing-sm;
            margin-right: @v-spacing-sm;
            margin-bottom: @h-spacing-md;
            white-space: nowrap;
          }
          &-unread {
            background: @fill-body;
          }
          &-tip {
            color: @brand-important;
          }
          &-name {
            color: @color-text-caption;
          }
          .am-icon {
            position: relative;
            top: 2 * @hd;
            padding-left: 3 * @hd;
          }
          .am-icon-mail-small {
            color: @brand-primary;
          }
          .am-icon-mail-read {
            top: 1 * @hd;
            color: @fill-disabled;
          }
        }
      }
    }
    &-unreadedcount {
      text-align: center;
      padding: 10 * @hd 0;
      color: @brand-primary;
      .hairline("top");
    }
  }
  &-content {
    flex: 1 1;
    position: relative;
    .email-loading {
      position: absolute;
      z-index: 100;
      left: 0;
      right: 0;
      top: 15%;
    }
    &-flex {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      padding-bottom: @h-spacing-md;
      box-sizing: border-box;
      padding: 0 @v-spacing-lg;
    }
    &-container {
      padding-bottom: @h-spacing-md;
      margin-bottom: @h-spacing-md;
      .hairline("bottom");
    }
    &-title {
      line-height: 24 * @hd;
      padding-top: @h-spacing-md;
      font-size: @font-size-caption;
      &-subject {
        padding-right: 10 * @hd;
        word-break: break-all;
      }
      &-icon {
        position: relative;
        top: 1 * @hd;
        display: inline-block;
        width: 30 * @hd;
        text-align: left;
        &.isZoom {
          .am-icon-email-switch {
            color: @brand-primary;
          }
        }
      }
      .am-icon-enclosure {
        color: @brand-primary;
        padding-left: @v-spacing-sm;
      }
      .am-icon-cizhanghao {
        color: @color-text-disabled;
      }
      .am-icon-blog-xing,
      .am-icon-collection,
      .am-icon-zhuzhanghao {
        color: #f5a623;
      }
    }
    &-date {
      color: @color-text-caption;
      font-size: @font-size-caption-sm;
      padding-top: @h-spacing-sm;
      .am-icon-blog-bujiao {
        position: relative;
        top: 2 * @hd;
        padding-right: @v-spacing-sm;
        color: @brand-primary;
      }
    }
    &-secrecy {
      color: @color-text-caption;
    }
    &-emailcontainer {
      word-break: break-all;
    }
    &-iframecontainer {
      overflow-x: scroll !important;
      -webkit-overflow-scrolling: touch;
    }
    &-iframe {
      border: none;
      // overflow-x: scroll;
      // -webkit-overflow-scrolling: touch;
    }
    .email-view-content-withdraw {
      .am-result {
        padding-top: 20 * @hd;
      }
    }
  }
  &-files {
    &-title {
      padding: @h-spacing-md 0;
      .hairline("bottom");
      color: @color-text-paragraph;
      .am-icon-enclosure {
        position: relative;
        top: 2 * @hd;
        padding-right: @h-spacing-md;
      }
    }
    &-list {
      padding: @h-spacing-sm 0;
      .am-list-body {
        border-bottom: none;
      }
      .am-list-body div:not(:last-child) .am-list-line {
        border-bottom: none;
      }
      .am-list-item {
        padding-left: 0;
        min-height: 36 * @hd;
      }
      .am-list-item .am-list-line {
        padding-right: 0;
      }
      .am-list-item .am-list-line .am-list-content {
        padding: @h-spacing-sm 0;
      }
      .am-flexbox .am-flexbox-item {
        &:last-child {
          margin-left: 0;
          padding-left: @h-spacing-md;
          width: 30 * @hd;
          flex: inherit;
          color: @color-text-caption;
        }
      }
      .wm-list-page-item-row {
        .ellipsis;
      }
      .wm-list-page-item-row-span-text-highlight {
        font-weight: normal;
        font-size: @font-size-caption-sm;
      }
      .wm-list-page-item-row {
        font-size: @font-size-caption-sm;
      }
    }
  }
}

.@{emialReadList} {
  background: @fill-body;
  &-tab {
    margin-bottom: @h-spacing-md;
    width: 100%;
    &-item {
      display: inline-block;
      padding: 0 10 * @hd;
      &-count {
        position: relative;
        top: -7 * @hd;
        color: @brand-primary;
        height: 20 * @hd;
        text-align: center;
        font-size: 16 * @hd;
      }
      &-label {
        color: #868886;
        height: 28 * @hd;
      }
      &:nth-child(2) {
        color: #2bbdc2;
      }
      &:last-child {
        color: #e26e3e;
      }
    }
    .am-flexbox.am-flexbox-align-center {
      height: 64 * @hd;
      box-sizing: border-box;
      border-bottom: none;
    }
    .am-tabs-expand-bar-tab {
      height: auto;
    }
    .tab-content {
      flex: none !important;
      margin: 0 auto !important;
      width: 100%;
    }
    .tab-extra {
      display: none;
    }
  }
  &-contianer {
    position: absolute;
    top: 64 * @hd + @h-spacing-md;
    width: 100%;
    bottom: 0;
  }
  &-list {
    // height: 45 * @hd;
    &-avatar {
      display: inline-block;
      padding-right: @v-spacing-lg;
      vertical-align: top;
      .am-avatar {
        width: 45 * @hd;
        height: 45 * @hd;
      }
    }
    &-right {
      display: inline-block;
      @diff: 60 * @hd;
      width: calc(~"100% - @{diff}");
    }
    &-item {
      display: inline-block;
      width: 50%;
      box-sizing: border-box;
      &:first-child {
        padding-right: @v-spacing-md;
        vertical-align: top;
      }
      &-top {
        color: @color-text-paragraph;
        padding-bottom: 3 * @hd;
        .ellipsis;
      }
      &-bottom {
        color: @color-text-caption;
        .ellipsis;
      }
    }
    .am-list-content {
      height: 45 * @hd;
    }
  }
  &.listbox {
    height: calc(~"100%" - 72 * @hd);
  }
  // .am-list-line {
  //   height: 60 * @hd;
  //   box-sizing: border-box;
  // }
}
